<template>
    <div class="flex-box">
        <el-row :gutter="20">
            <el-col :span="5" v-for="item of formList" :key="item.label">
                <div class="list-item">
                    <div class="label" :style="{ width: (item.labelWidth || 100) + 'px' }">{{ item.label }}</div>
                    <template v-if="item.slots">
                        <slot :name="item.slots"></slot>
                    </template>
                    <template v-else>
                        <template v-if="item.type === 'input'">
                            <el-input v-model="list[item.code]" :placeholder="`请输入${item.label}`" style="width: 100%" />
                        </template>
                        <template v-else-if="item.type === 'select'">
                            <el-select-v2 v-model="list[item.code]" :options="item.options"
                                :placeholder="`请选择${item.label}`" style="width: 100%" clearable />
                        </template>
                        <template v-else-if="item.type === 'picker'">
                            <el-date-picker v-model="list[item.code]" type="daterange" start-placeholder="开始时间"
                                end-placeholder="结束时间" style="width: 100%" value-format="YYYY-MM-DD" @change="onChange" />
                        </template>
                    </template>
                </div>
            </el-col>
            <el-col :span="4">
                <BtnLay @onClick="queryFn" type="primary">查询</BtnLay>
                <BtnLay @onClick="resetFn">重置</BtnLay>
            </el-col>
        </el-row>


    </div>
</template>
<script setup >
import { computed, defineProps, defineEmits, defineComponent } from 'vue'
import BtnLay from '../BtnLay'

defineComponent({
    components: {
        BtnLay,
    }
})
const props = defineProps({
    parameter: Object,
    formList: Object,
});



const list = computed(() => props.parameter);

const emit = defineEmits(['onquery', 'onReset']);

// 查询
function queryFn() {
    emit('onquery');
}

// 重置
function resetFn() {
    emit('onReset');
}

// 时间框选择器
function onChange(val) {
    list.value.createTimeStart = val[0]
    list.value.createTimeEnd = val[1]

}
</script>
<style scoped lang="scss">
.flex-box {
    // display: flex;
    // flex-wrap: wrap;

    .list-item {
        display: flex;
        align-items: center;

        margin-bottom: 24px;

        .label {

            font-size: 14px;
            color: #303133;

        }
    }


}
</style>
  